<script src="<?php echo RES;?>jquery3.min.js"></script>
<script src="<?php echo RES;?>cropper/cropper.min.js?www.zeai.cn"></script>
<link href="<?php echo RES;?>cropper/cropper.min.css" rel="stylesheet" type="text/css">
<style>
.div_left_box{max-width:100%;z-index:998}
@keyframes div_leftAnm1 {0% {-webkit-transform: translateX(100vw);transform: translateX(100vw)}100% {-webkit-transform: translateX(0);transform: translateX(0)}}
.div_leftAnm1 {-webkit-animation-duration:0.3s;animation-duration:0.3s;}
@keyframes div_leftAnm2 {0% {-webkit-transform: translateX(0);transform: translateX(0)}100% {-webkit-transform: translateX(100vw);transform: translateX(100vw)}}
.div_leftAnm2 {-webkit-animation-duration:0.3s;animation-duration:0.3s}
.cut_box{display:none;}
.cut_box .cut_topbox{position:relative;left:0;top:0}
.cut_box .cut_topbox .cut_cancel{position:absolute;left:0;top:0;text-align:left}
.cut_box .cut_topbox .cut_cancel i{width:80px;line-height:50px;padding-left:15px;font-size:18px;}
.cut_box .cut_topbox span{width:70%;margin:0 auto;display:inline-block;font-size:16px;line-height:50px}
.cut_box .cut_topbox .submit_cut{background-color:<?php echo $_ADM['color'];?>;position:absolute;top:8px;right:15px;padding:0 12px;line-height:34px;border-radius:2px;color:#fff;font-size:16px}
.cut_box #imgBox{position:absolute;top:50px;width:100%;height:-webkit-calc(100% - 190px);z-index:2}
.cut_box .cut_btnbox{height:140px;position:absolute;left:0px; bottom:0px; right:0px;background-color:#fff;z-index:1}
.cut_box .cut_btnbox ul{padding-top:20px;height:50px}
.cut_box .cut_btnbox ul li{width:25%;float:left;height:100%;color:#ccc;text-align:center;font-size:12px}
.cut_box .cut_btnbox ul li i{color:#666;font-size:24px;display:block;margin-bottom:5px}
.cut_box .cut_btnbox ul li:nth-child(3) i{transform:rotateY(180deg);}
.cut_box .cut_btnbox button{width:80%;margin-top:10px;border-color:#eee;font-size:14px;border-radius:34px}
.cut_box .cut_btnbox button img{display:none;vertical-align:middle}
</style>
<script>
function ZEAICUT(uid) {
	this.uPicid = 'cut_tmppic';
	this.uid = uid;
	this._scaleX = 0;//x坐标
	this._scaleY = 0;//y坐标
	this.cut_base64_imgUrl = null;//裁剪为base64
}
ZEAICUT.prototype = {
	init:function() {
		var _this = this;
		$("#"+_this.uPicid).cropper({
			aspectRatio: 4/5,
			autoCropArea: 0.8,//图片80%百分比
			autoCrop:true,
			dragMode: "move",
			cropBoxResizable: true,//是否调整裁剪框大小
			movable: true,//是否移动裁切框
			resizable:true,//是否改变裁剪框大小
			mouseWheelZoom:false,
			touchDragZoom:false,
			zoomable: false,//是否放大图片
			guides:true,//显示虚线网格
			dragCrop:false,//禁止创建一个裁剪框
			minCanvasWidth:0,
			minCanvasHeight:0,
			crop: function(data){
				window._scaleX = data.scaleX;
				window._scaleY = data.scaleY;
			}
		});
	},
	wake:function() {
		var _this = this;
		rotateX.onclick=function(){
			_this._scaleX = window._scaleX * -1;
			$('#'+_this.uPicid).cropper('scaleX', _this._scaleX);
		}
		rotateY.onclick=function(){
			_this._scaleY = window._scaleY * -1;
			$('#'+_this.uPicid).cropper('scaleY', _this._scaleY);
		}
		rotate_90.onclick=function(){
			$('#'+_this.uPicid).cropper('rotate', -90);
		}
		rotate90.onclick=function(){
			$('#'+_this.uPicid).cropper('rotate', 90);
		}
		cut_cancel.onclick=function(){
			$('#'+_this.uPicid).cropper('destroy');
			div_left_mask.click();
		}
		o('submit_cut1').onclick=function(){cut_ok();}
		o('submit_cut2').onclick=function(){cut_ok();}
		function cut_ok(){
			_this.obj_id = $(this).attr('id');
			var dataURL = $('#'+_this.uPicid).cropper("getCroppedCanvas", {
				//width:$("#w").val(),height:$("#h").val()
			});
			_this.cut_base64_imgUrl = dataURL.toDataURL("image/jpeg",0.9);
			_this.submitCut();
		}
	},
	submitCut:function() {
		var _this = this;
		if (!$('#'+_this.uPicid).hasClass("dis_submit")) {
			$("#"+_this.uPicid).addClass("dis_submit");
			$("#submit_cut2").find("img").show();
			var fname=o(_this.uPicid).src;fname = fname.replace(up2,'');
			fname = fname.replace('/m/','/tmp/');
			fname = fname.replace('_b.','.');
			fname = fname.replace('.','_cut.');
			$.ajax({
				type:"POST",
				url:upurl,
				cache: false,
				data: {
					datatype:'ajax', 
					base64img:_this.cut_base64_imgUrl,dbname:fname,submitok:'ajax_tmpB_up_cut',ifbase64:1
				},
				dataType: "json",
				success: function(rs) {
					submitCut_success(rs,_this.uid)
				},
				error: function() {zeai.msg('网络错误');}
			});
		}
	}
}
function submitCut_success(rs,uid){
	zeai.ajax({url:'<?php echo SELF;?>',data:{submitok:'submitCut_success',_cut:rs._cut,uid:uid}},function(e){var rs=zeai.jsoneval(e);
		zeai.msg(0);zeai.msg(rs.msg);
		if(rs.flag=='stop'){submitCut_success_callback(rs);}else if(rs.flag==1){setTimeout(function(){location.reload(true);},1000);}
	});
}
</script>
<div id="cut_box" class="cut_box">
	<div class="cut_topbox">
        <a id="cut_cancel" class="cut_cancel"><i class="ico" >&#xeaca;</i></a>
        <span>裁切照片</span>
        <a id="submit_cut1" class="submit_cut zeaibg">确定</a>
    </div>
    <div id="imgBox"><img id="cut_tmppic"></div>
    <div class="cut_btnbox">
        <ul>
            <li id="rotateX"><i class="ico">&#xe69e;</i>左右变换</li>
            <li id="rotateY"><i class="ico">&#xe685;</i>上下变换</li>
            <li id="rotate_90"><i class="ico">&#xe663;</i>左旋转90°</li>
            <li id="rotate90"><i class="ico">&#xe663;</i>右旋转90°</li>
        </ul>
        <button type="button" class="btn size3 BAI " id="submit_cut2"><i class="ico">&#xe6b1;</i> 确定<img src="<?php echo RES;?>loading.gif"></button>	
    </div>
</div>
